<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <input type="text" id="keyword"><input type="button" value="查找" onclick="query()">
    <input type="button" value="新增" onclick="add()">
    <table class="tb">

        <tr>
            <th>id</th>
            <th>标题</th>
            <th>摘要</th>
            <th>内容</th>
            <th>分类</th>
            <th>作者</th>
            <th>发表时间</th>
            <th>操作</th>
        </tr>

    </table>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
//初始化的时候，获得列表
            $.get("http://localhost:3000/blogs", function (res) {
                console.log(res);
                res.data.forEach(function (item) {
                    var tb = $('.tb');
                    let html = ` <tr id ="id01">
                     <td>
                        ${item.id}
                        </td>
                        <td>
                        ${item.title}
                        </td>
                        <td>
                        ${item.abstract}
                        </td>
                        <td>
                        ${item.content}
                        </td>
                        <td>
                        ${item.classify}
                        </td>
                        <td>
                        ${item.author}
                        </td>
                        <td>
                        ${item.createdAt}
                        </td>
                        <td><input type="button" value= "修改" onclick=" detail( ${item.id})" >
                        <input type="button" value= "删除" onclick=" del( ${item.id})" ></td>
                    </tr>`
                    tb.append(html)
                })
            })



        })
        function add() {
            location.href = "./add.html"
        }
        function del(id) {
            //删除
            $.ajax({
                url: `http://localhost:3000/blogs/${id}`,
                type: 'DELETE',
                success: function (res) {
                    location.href = "./index.html"
                }
            })
        }
        function detail(id) {
            //更新
            location.href = "./amend.html?id" + id
        }

        function query() {
            //按关键字查找
            let keyword = $('#keyword').val();
            console.log(keyword);
            if (keyword) {
                let obj = { keyword }
                $.post("http://localhost:3000/blogs/keyword", obj, function (res) {
                    let tb = $(".tb")
                    console.log(res);
                    let tr = $("[id=id01]")
                    tr.remove()
                    tb.append(
                        ` <tr id ="id01">
                     <td>
                        ${res[0].id}
                        </td>
                        <td>
                        ${res[0].title}
                        </td>
                        <td>
                        ${res[0].abstract}
                        </td>
                        <td>
                        ${res[0].content}
                        </td>
                        <td>
                        ${res[0].classify}
                        </td>
                        <td>
                        ${res[0].author}
                        </td>
                        <td>
                        ${res[0].createdAt}
                        </td>
                        <td><input type="button" value= "修改" onclick=" detail( ${res[0].id})" >
                        <input type="button" value= "删除" onclick=" del( ${res[0].id})" ></td>
                    </tr>`
                    )
                })
            }else{
                location.href="./index.html"
            }


        }
    </script>
</body>

</html>